<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop" style="width: 80%">
        甲醇作业规范 {{ secondTitle }}
      </div>
      <div class="loadAndSearch" v-show="roleId == 2 || roleId == 1">
        <div class="loadExcel">
          <div class="button" type="success" @click="addOne()">新增</div>

          <div class="buttonBack" type="success" @click="backIndexPage()">
            返回
          </div>
        </div>
        <div class="search" style="width: 204px !important">
          <input
            style="width: 150px !important"
            type="text"
            placeholder="规范名称"
            v-model="fillPeople"
            @input="changeText()"
          />
          <div class="searchButton" @click="getRenderList()">搜索</div>
        </div>
      </div>
      <div class="loadAndSearch" v-show="roleId != 2 && roleId != 1">
        <div class="loadExcel">
          <div class="buttonBack" type="success" @click="backIndexPage()">
            返回
          </div>
        </div>
        <div class="search" style="width: 204px !important">
          <input
            style="width: 150px !important"
            type="text"
            placeholder="规范名称"
            v-model="fillPeople"
            @input="changeText()"
          />
          <div class="searchButton" @click="getRenderList()">搜索</div>
        </div>
      </div>

      <div class="table" :style="{ width: tableWidth }" style="height: 67vh">
        <el-table
          empty-text="暂无数据"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#777676 !important',
            fontWeight: '800',
          }"
          :data="tableData"
          border
          stripe
          style="width: 100%; height: auto"
          max-height="67vh"
          :row-style="{ height: 30 + 'px' }"
          :cell-style="{ padding: 0 + 'px' }"
          @row-dblclick="handleRowDblclick"
        >
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="50"
          />
          <el-table-column
            prop="name"
            label="规范名称"
            align="center"
            min-width="110"
          />

          <el-table-column
            prop="file"
            label="文件名"
            align="center"
            min-width="120"
          >
            <template #default="scope">
              <div
                class="bigLight"
                v-show="scope.row.version"
                @click="
                  skipPageForSee(
                    scope.row.file,
                    scope.row.name + '-V' + scope.row.version + '.pdf'
                  )
                "
              >
                {{ scope.row.name + "-V" + scope.row.version + ".pdf" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="executionDate"
            label="开始实行时间"
            align="center"
            width="220"
          >
          </el-table-column>
          <el-table-column
            prop="version"
            label="版本号"
            align="center"
            min-width="80"
          >
          </el-table-column>
          <el-table-column
            prop="lastModifiedDate"
            label="最后维护时间"
            align="center"
            min-width="120"
          >
          </el-table-column>
        </el-table>
        <!-- 内容过多，会出现滚动条 -->
      </div>
      <div class="foot">
        <div class="currentPage">当前第{{ page }}/{{ totalPages }}页</div>
        <div
          class="lastPage"
          :style="{ background: color }"
          @click="clickLastPage()"
        >
          上一页
        </div>
        <div
          class="nextPage"
          :style="{ backgroundColor: color1 }"
          @click="clickNextPage()"
        >
          下一页
        </div>
        <div class="currentNumber">共{{ totalNumber }}条</div>
        <div>跳转至:</div>
        <input
          type="text"
          class="skipPage"
          style="width: 50px !important"
          v-model="shipPageNumer"
        />
        <div class="sureSkip" @click="skipPage">确定</div>
      </div>
    </div>
    <div class="dialog2" :style="{ display: uploadfile }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile"
          id="addfile"
          @change="getFile($event)"
          accept=".pdf,.PDF"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile()">
          确定
        </button>
      </div>
    </div>
    <div class="dialog" ref="dialog" :style="{ display: show }">
      <div class="loadHomeWorkIneer">
        <div class="changeTop">
          <div
            class="sure"
            @click="sureAdd()"
            v-show="this.roleId == 2 || this.roleId == 1"
          >
            确认
          </div>
          <div
            class="delete"
            @click="deleteOne(id)"
            v-show="
              (this.roleId == 2 || this.roleId == 1) && this.addOrEdit == '编辑'
            "
          >
            删除
          </div>
          <div class="back" @click="backToIndex()">返回</div>
        </div>
        <div class="dialogText">通航评估报告</div>
        <div class="manyInput">
          <div class="iuptInnerContain">
            <div class="inputInner">
              <div class="name">规范名称:</div>
              <input
                type="text"
                placeholder="规范名称"
                v-model="name"
                :disabled="this.roleId != 2 && this.roleId != 1"
              />
            </div>
            <div class="inputInner">
              <div class="name">开始实行时间:</div>
              <div class="inputContainer">
                <el-config-provider :locale="locale">
                  <el-date-picker
                    v-model="executionDate"
                    type="date"
                    placeholder="开始实行时间"
                    format="YYYY/MM/DD"
                    value-format="YYYY/MM/DD"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </el-config-provider>
              </div>
            </div>
            <div class="inputInner">
              <div class="name">版本号:</div>
              <input
                type="text"
                placeholder="版本号"
                v-model="version"
                :disabled="this.roleId != 2 && this.roleId != 1"
              />
            </div>

            <div class="inputInner">
              <div class="name">最后更新时间:</div>
              <div class="inputContainer">
                <el-config-provider :locale="locale">
                  <el-date-picker
                    v-model="lastModifiedDate"
                    type="date"
                    placeholder="最后更新时间"
                    format="YYYY/MM/DD"
                    value-format="YYYY/MM/DD"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </el-config-provider>
              </div>
            </div>
            <div class="inputInner1">
              <div
                class="name1"
                v-if="
                  this.fileFlag == false &&
                  (this.roleId == 2 || this.roleId == 1)
                "
                @click="uploadfile = 'block'"
              >
                上传附件
              </div>
              <div
                class="name1"
                v-if="
                  this.fileFlag == true &&
                  (this.roleId == 2 || this.roleId == 1)
                "
                @click="uploadfile = 'block'"
              >
                更换附件
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import _ from "lodash";
export default {
  name: "",
  data() {
    return {
      compare: {},
      tableData: [],
      tableWidth: null,
      page: 1,
      size: 20,
      locale: zhCn,
      totalPages: null,
      totalNumber: null,
      shipPageNumer: 1,
      NewdeleteFileName: "",
      olddeleteFileName: "",
      name: "",
      typeKey: "",
      havingNum: "",
      adventFlag: "",
      lastModifiedDate: "",
      executionDate: "",
      secondTitle: "",
      id: "",
      show: "none",
      color: "#EBEBEB",
      color1: "#EBEBEB",
      file: null,
      fileName: "",
      uploadfile: "none",
      standardType: null,
      roleId: null,
      addOrEdit: "新增",
      selectType: "LNG",
      fileFlag: false,
      fillPeople: "",
      type: 1,
      version: "",
      lastModifiedDate: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    backToIndex() {
      if (this.roleId == 2) {
        if (this.addOrEdit == "编辑") {
          let data = {
            file: this.filePath,
            name: this.name,
            executionDate: this.executionDate,
            version: this.version,
            lastModifiedDate: this.lastModifiedDate,
          };
          let equal = _.isEqual(data, JSON.parse(this.compare));
          if (equal) {
            this.close();
          } else {
            this.$confirm("数据信息有变化是否保存再离开？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              // type: "warning",
            })
              .then(() => {
                this.sureAdd();
              })
              .catch(() => {
                this.close();
              });
          }
        } else if (this.addOrEdit == "新增") {
          this.close();
        }
      } else {
        this.close();
      }
    },
    // 删除数据
    deleteOne(a) {
      // let that = this;
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/fill-standard/${a}`,
            }).then((r) => {
              if (r.status == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });

                this.getRenderList();
                if (this.olddeleteFileName) {
                  this.deleteRomoteFile(this.olddeleteFileName);
                }
                this.show = "none";
              }
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    // 删除远程数据
    deleteRomoteFile(fileName) {
      let data = {
        fileName: fileName,
        type: 6,
      };

      service({
        method: "delete",
        url: `/system/delete-file`,
        params: data,
      }).then((r) => {
        this.NewdeleteFileName = "";
        this.olddeleteFileName = "";
      });
    },

    changeText() {
      if (this.fillPeople) {
        this.page = 1;
      }
    },
    backIndexPage() {
      this.$router.go(-1);
    },
    submitAddFile() {
      let data = {
        file: this.file,
        type: 6,
        fileName: "",
      };
      service({
        method: "post",
        url: "/system/upload-file",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: data,
      })
        .then((res) => {
          this.filePath = res.data;
          this.NewdeleteFileName = res.data;
          this.uploadfile = "none";
          this.$message({
            message: "文件选择成功",
            type: "success",
          });
          document.getElementsByClassName("addfile")[0].value = "";
          this.fileName = "";
        })
        .catch((err) => {
          this.$message({
            message: err,
            type: "info",
          });
        });
    },
    sureAdd() {
      if (!this.filePath) {
        return this.$message({
          message: "附件必须上传",
          type: "warning",
        });
      }
      if (!this.version || !this.name) {
        return this.$message({
          message: "规范名称和版本号不可为空",
          type: "warning",
        });
      }
      if (this.addOrEdit == "新增") {
        let data = {
          standardType: this.standardType,
          file: this.filePath,
          name: this.name,
          type: this.type,
          executionDate: this.executionDate,
          version: this.version,
          lastModifiedDate: this.lastModifiedDate,
        };

        service({
          method: "POST",
          data: data,
          url: "/fill-standard",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "新增成功",
              });

              this.show = "none";
              document.getElementsByClassName("addfile")[0].value = "";
              this.fileName = "";
              this.close();
              this.getRenderList();
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      } else if (this.addOrEdit == "编辑") {
        let data = {
          standardType: this.standardType,
          file: this.filePath,
          name: this.name,
          type: this.type,
          id: this.id,
          executionDate: this.executionDate,
          version: this.version,
          lastModifiedDate: this.lastModifiedDate,
        };
        service({
          method: "put",
          data: data,
          url: "/fill-standard",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "修改成功",
              });

              this.show = "none";
              document.getElementsByClassName("addfile")[0].value = "";
              this.fileName = "";
              this.getRenderList();
              if (this.olddeleteFileName) {
                this.deleteRomoteFile(this.olddeleteFileName);
              }
              this.close();
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      }
      this.name = "";
      this.executionDate = "";
      this.filePath = "";
      this.version = "";
      this.lastModifiedDate = "";
      this.id = "";
    },
    getFile() {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
      document.getElementsByClassName("addfile")[0].value = "";
    },
    cancelUp() {
      this.file = "";
      this.fileName = "";

      document.getElementById("addfile").value = "";
      this.uploadfile = "none";
    },
    addOne() {
      this.show = "block";
      this.addOrEdit = "新增";
    },
    close() {
      this.show = "none";
      if (this.NewdeleteFileName) {
        this.deleteRomoteFile(this.NewdeleteFileName);
      }
      document.getElementsByClassName("addfile")[0].value = "";
      this.fileName = "";
      this.uploadfile = "none";
      this.name = "";
      this.executionDate = "";
      this.fileFlag = false;
      this.file = "";
      this.executionDate = "";
      this.filePath = "";
      this.version = "";
      this.lastModifiedDate = "";
      this.id = "";
    },
    clickLastPage() {
      if (this.page > 1) {
        this.page--;
        if (this.page == 1) {
          this.color = "#EBEBEB";
        } else {
          this.color = "#268FDE";
        }
        if (this.page < this.totalPages) {
          this.color1 = "#268FDE";
        }
        this.getRenderList();
      } else {
        this.color = "#EBEBEB";
      }
    },
    clickNextPage() {
      if (this.page < this.totalPages) {
        this.page++;
        this.color = "#268FDE";
        if (this.page == this.totalPages) {
          this.color1 = "#EBEBEB";
        } else {
          this.color1 = "#268FDE";
        }
      }
      this.getRenderList();
    },
    changeSelectType() {
      if (this.selectType == "LNG") {
        this.type = 0;
        this.getRenderList();
      } else if (this.selectType == "甲醇") {
        this.type = 1;
        this.getRenderList();
      }
    },
    handleRowDblclick(row) {
      this.addOrEdit = "编辑";
      this.tableData.forEach((item) => {
        if (item.id == row.id) {
          this.compare = JSON.stringify({
            file: item.file,
            name: item.name,
            executionDate: item.executionDate,
            version: item.version,
            lastModifiedDate: item.lastModifiedDate,
          });
          this.id = item.id;
          this.name = item.name;
          this.version = item.version;
          this.executionDate = item.executionDate;
          this.lastModifiedDate = item.lastModifiedDate;
          this.filePath = item.file;
          if (item.file) {
            this.fileFlag = true;
          } else {
            this.fileFlag = false;
          }
        }
        this.olddeleteFileName = item.file;
      });

      this.show = "block";
    },

    customIndex(index) {
      return (this.page - 1) * this.size + index + 1;
    },
    // 导出文件
    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },

    //单个角色
    skipPageForSee(fileName, scope) {
      this.$router.push({
        path: "/app.fillSpecificationAddThrid",
        query: {
          name: fileName,
          bigName: this.secondTitle,
          loadName: scope,
        },
      });
    },
    // 获取列表数据
    async getRenderList() {
      let data = {
        page: this.page,
        size: this.size,
        standardType: this.standardType,
        type: this.type,
      };
      if (this.fillPeople) {
        data = {
          page: this.page,
          size: this.size,
          standardType: this.standardType,
          type: this.type,
          name: this.fillPeople,
        };
      } else {
        data = {
          page: this.page,
          size: this.size,
          standardType: this.standardType,
          type: this.type,
        };
      }
      await service({
        methods: "get",
        url: "/fill-standard/find-one-page",
        params: data,
      })
        .then((e) => {
          this.totalPages = e.data.totalPages;
          this.totalNumber = e.data.totalElements;
          if (this.totalPages == 0) {
            this.totalPages = 1;
          }
          if (this.page < this.totalPages) {
            this.color1 = "#268FDE";
          } else {
            this.color1 = "#EBEBEB";
          }
          if (this.page == 1) {
            this.color = "#EBEBEB";
          } else {
            this.color = "#268FDE";
          }
          this.tableData = e.data.content;
          this.currentNum = e.data.numberOfElements;
        })
        .catch((err) => {});
    },

    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = window.innerWidth - 220 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = window.innerWidth - 100 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 20 + "px";
      }
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
  },

  created() {
    this.sendMessage();
    this.secondTitle = this.$route.query.name;
    this.roleId = sessionStorage.getItem("role");
    this.standardType = this.$route.query.value;
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    let that = this;
    this.getRenderList();
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.dialog,
.dialog1 {
  width: 100%;
  height: 100%;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}
.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;
    .loadTop {
      width: 50%;
      line-height: 4vh;
      color: #777676;
      // text-indent: 10px;
      margin-left: 10px;
      font-size: 20px;
      font-weight: 800;
    }
    .loadSecond {
      width: 280px;

      text-align: center;
      line-height: 33px;
      color: #777676;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 10px;
      font-size: 15px;
      .topName {
        width: 90px;
        line-height: 33px;
        background: #67c23a;
        border-radius: 5px;
        a {
          display: block;
          width: 90px;
          line-height: 33px;
          text-decoration: none;
          color: white;
        }
      }
      .topName:nth-child(3) {
        background: #242121;
      }
    }
    // .loadExcel {
    //   width: 200px;
    //   margin-top: 10px;
    //   margin-left: 10px;

    //   height: 20px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   .button {
    //     width: 60px;
    //     line-height: 20px;
    //     font-size: 18px;
    //     text-align: center;
    //   }
    // }
  }
  // background: blue;
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;
  height: 65vh;
  // background: red;
}
.manyInput::-webkit-scrollbar {
  width: 5px; /* 自定义滚动条的宽度 */
  height: 5px; /* 如果需要自定义垂直滚动条的高度 */
}

/* 自定义滚动条滑块的颜色 */
.manyInput::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
  border-radius: 10px; /* 可选：为滚动条滑块添加圆角 */
}

/* 自定义滚动条轨道的颜色 */
.manyInput::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px; /* 可选：为滚动条轨道添加圆角 */
}
.manyInput {
  width: 770px;
  height: 80vh;
  overflow: auto;

  margin: auto;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // overflow: scroll;
  .iuptInnerContain {
    width: 770px;
    // height: 230px;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    .inputInner1 {
      width: 375px;
      height: 35px;
      // background: blue;
      margin: auto;
      margin-top: 100px;
      display: flex;
      align-items: center;
      position: relative;
      // justify-content: center;
      color: #365488;
      .name1 {
        width: 100px;
        margin-left: 150px;
        font-size: 15px;
        height: 100%;
        line-height: 4vh;
        text-align: center;
        border-radius: 5px;
        background: #67c23a;
        color: white;
      }
    }
    .inputInner {
      width: 375px;
      height: 35px;
      // background: blue;
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      position: relative;
      // justify-content: space-between;
      color: #365488;
      .name {
        width: 150px;
        height: 100%;
        line-height: 4vh;
        text-align: right;
        font-size: 15px;
      }

      .inputContainer {
        width: 210px;
        margin-left: 5px;
      }
      .el-input__inner {
        background: white !important;
      }
      input {
        width: 220px;
        height: 34px;
        margin-left: 5px;
        border-radius: 5px;
        text-indent: 1em;
        outline: none;
        border: none;
        background: white !important;
        color: #365488;
        border: 1px solid #dcdfe6;
      }
      input::-webkit-input-placeholder {
        color: #a8abb2;
      }
      input[type="date"] {
        // padding: 5px;
        color: #365488;
        text-align: left;
        // border: 1px solid #365488;
        border-radius: 4px;
        // background-color: #fff;
        box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
      }
      // input[type="number"] {
      //   appearance: textfield;
      //   -moz-appearance: textfield;
      // }
      // 　　input[type="number"]::-webkit-inner-spin-button,
      // 　　input[type="number"]::-webkit-outer-spin-button {
      //   -webkit-appearance: none;
      //   margin: 0;
      // }
    }

    .el-date-picker .el-picker-panel {
      background-color: white !important; /* 你想要的背景颜色 */
    }
  }
}
.dialog2 {
  z-index: 100000;
}
/* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */

@media (min-width: 0px) and (max-width: 960px) {
  .manyInput {
    width: 375px !important;
    display: block !important;
    .inputInner {
      margin: auto !important;
      // margin-top: 10px !important;
    }
  }
  .closeAndSrue {
    width: 110px;
  }
}
</style>
